<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>设备维修管理</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="repair-mgr">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addMachine">新增设备</el-button>
          <el-button v-if="selectMachineList.length>0" size="medium" type="primary" @click="toBatchUpdate">批量修改</el-button>
        </template>
        <div slot="search-content">
          <search-form :search="search" :dropdown-option="dropdownOption"></search-form>
        </div>
      </search-btn-view>
      <div class="repair-mgr-table-div">
        <el-table fit stripe border :data="machineList" style="width: 100%" height="parent" @selection-change="selectionChange">
          <el-table-column type="selection" width="40px" align="center" fixed="left"></el-table-column>
          <el-table-column label="编号" prop="id" min-width="100px" align="center"></el-table-column>
          <el-table-column label="关联订单" prop="factoryNo" min-width="140px" header-align="center"></el-table-column>
          <el-table-column label="位置" min-width="140px" header-align="center">
            <template slot-scope="scope">
              <span>{{scope.row.districtName.join(' - ')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="设备型号" prop="machineModel" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="设备编号" prop="machineSerialNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="出厂日期" width="120px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.outTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="客户" prop="buyer" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="维修主管" prop="serviceManager" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="维修技工" prop="serviceWorker" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="物联网卡编号" prop="internetThingsCard" min-width="150px" header-align="center"></el-table-column>
          <el-table-column label="警报类型" prop="typeName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="启用状态" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg(`machineRepair.repairMgr.status.${scope.row.status}`)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="creater" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="创建时间" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.createTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" width="165px" align="center" fixed="right">
            <template slot-scope="scope">
              <div>
                <el-button size="mini" type="primary" @click="updateMachine(scope.row)">修改</el-button>
                <el-button size="mini" type="primary" style="margin-left: 0;" @click="createCode(scope.row)">生成二维码</el-button>
              </div>
              <div v-if="scope.row.internetThingsCard!==''" style="margin-top:3px">
                <el-button size="mini" type="primary" @click="createQrcode(scope.row)">物联网卡二维码</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>

    <el-dialog :title="formType==='add'?'新增设备':'修改设备'" :visible.sync="openForm" width="600px" top="10vh" @closed="formClosed">
      <div style="height:calc(80vh - 54px);overflow: auto;">
        <machine-repair-form v-if="openForm" :machine="selectMachine" :type="formType" :dropdown-option="dropdownOption" @save-success="saveSuccess">
        </machine-repair-form>
      </div>
    </el-dialog>

    <el-dialog title="二维码" :visible.sync="openCode" width="400px" top="calc(50vh - 150px)" @closed="selectMachine=null">
      <div style="height:246px;overflow: auto;">
        <machine-repair-qrcode v-if="openCode" :machine="selectMachine"></machine-repair-qrcode>
      </div>
    </el-dialog>

    <el-dialog title="物联网卡二维码" :visible.sync="openQrCode" top="calc(50vh - 160px)" @closed="qcodeClosed">
      <div>
        <card-code v-if="openQrCode" :card="selectMachine"></card-code>
      </div>
    </el-dialog>

    <el-dialog title="批量修改" :visible.sync="openUpdate" width="500px" top="calc(50vh - 130px)" @closed="selectMachineList=[]">
      <div style="height:200px;overflow: auto;">
        <batch-update-form v-if="openUpdate" :data="selectMachineList" :dropdown-option="dropdownOption" @update-success="batchUpdateSuccess">
        </batch-update-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="./myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css",
    "/remoteEquipment/cardSetting/css/cardCode.css",
    "./machineRepair/repairMgr/css/searchForm.css",
    "./machineRepair/repairMgr/css/machineRepairForm.css",
    "./machineRepair/repairMgr/css/batchUpdateForm.css"
  ], [
    "/static/vue/qrcode.min.js",
    "/vueSystem/i18n/index.js",
    "/vueSystem/js/checkVaildUtil.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/filterSelect.js",
    "/vueSystem/components/sysAutocomplete.js",
    "/vueSystem/mixins/tablePaginationMixin.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/vueSystem/models/baseModel.js",
    "/remoteEquipment/cardSetting/cardCode.js"
  ]);

</script>
<script src="./machineRepair/repairMgr/searchForm.js"></script>
<script src="./machineRepair/repairMgr/machineRepairForm.js"></script>
<script src="./machineRepair/repairMgr/machineRepairQrcode.js"></script>
<script src="./machineRepair/repairMgr/batchUpdateForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin()
    ],

    data: function () {
      var search = {
        machineModel: "",
        machineSerialNo: "",
        outTimeStart: null,
        outTimeEnd: null,
        buyer: "",
        status: "",
        typeName: "",
        internetThingsCard: "",
        hasInternetThingsCard: "",
        address: []
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        machineList: [],
        openForm: false,
        openCode: false,
        openUpdate: false,
        openQrCode: false,
        formType: '',
        selectMachine: null,
        selectMachineList: [],
        dropdownOption: {},
        moment: moment,
        i18n: i18n
      };
    },

    created: function () {
      this.setMachineList(true);
    },

    methods: {
      setMachineList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;

        var postData = {
          start: start,
          length: pageSize
        };

        this.setPostData(postData);

        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/getConfigList', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var machineList = res.returnData;
          for (var i = 0; i < machineList.length; i++) {
            var machine = machineList[i];
            var outTime = machine.outTime;
            if (SysUtil.isEmpty(outTime)) {
              outTime = null;
            } else {
              outTime = moment(outTime).valueOf();
            }
            machine.outTime = outTime;

            var internetThingsCard = machine.internetThingsCard;
            if (SysUtil.isEmpty(internetThingsCard)) {
              machine.internetThingsCard = '';
            }

            var districtName = machine.districtName;
            var districtCode = machine.districtCode;
            if (SysUtil.isEmpty(districtName)) {
              districtName = [];
              districtCode = [];
            } else {
              districtName = districtName.split(',');
              districtCode = districtCode.split(',');
            }
            machine.districtName = districtName;
            machine.districtCode = districtCode;
          }

          self.machineList = machineList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      setPostData: function (postData) {
        var search = this.search;
        var fields = ['machineModel', 'machineSerialNo', 'buyer', 'typeName', 'internetThingsCard', 'hasInternetThingsCard'];
        SysUtil.setPostData(postData, search, fields);

        var status = search.status;
        if (status === '') {
          status = -1;
        }
        postData.status = status;

        var outTimeStart = search.outTimeStart;
        if (outTimeStart !== null) {
          postData.outTimeStart = moment(outTimeStart).format('YYYY-MM-DD')
        }

        var outTimeEnd = search.outTimeEnd;
        if (outTimeEnd !== null) {
          postData.outTimeEnd = moment(outTimeEnd).format('YYYY-MM-DD')
        }

        var address = search.address;
        if (address.length > 0) {
          var addressCodeMap = this.dropdownOption.addressCodeMap;
          var districtName = _.map(address,function(code){
            return addressCodeMap[code];
          });
          postData.districtName = districtName.join(',');
        }
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setMachineList(true);
      },

      pageChange: function () {
        this.setMachineList();
      },

      addMachine: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      updateMachine: function (machine) {
        this.formType = 'update';
        this.selectMachine = machine;
        this.openForm = true;
      },

      saveSuccess: function () {
        this.openForm = false;
        this.setMachineList();
      },

      formClosed: function () {
        this.formType = '';
        this.selectMachine = null;
      },

      createCode: function (machine) {
        this.selectMachine = machine;
        this.openCode = true;
      },

      selectionChange: function (machineList) {
        this.selectMachineList = machineList;
      },

      toBatchUpdate: function () {
        this.openUpdate = true;
      },

      batchUpdateSuccess: function () {
        this.openUpdate = false;
        this.setMachineList();
      },

      createQrcode: function (machine) {
        this.selectMachine = machine;
        this.openQrCode = true;
      },

      qcodeClosed: function () {
        this.selectMachine = null;
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      MachineRepairForm: MachineRepairForm,
      MachineRepairQrcode: MachineRepairQrcode,
      BatchUpdateForm: BatchUpdateForm,
      CardCode: CardCode
    }
  });

</script>

<style>
  .repair-mgr {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .repair-mgr .repair-mgr-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
